功能實作 : Demo

一、前言

本篇主要在探討「各種 CSS 置中排版的技巧」，這些技巧主要是參考 Amos 大的「CSS垂直置中技巧，我只會23個，你會幾個」文章【1】，原本以為只有 4～5種排版的方法，沒想到竟然有多達 23種。這些排版技巧實作起來的難易度不太一樣，以些好理解的就直接帶進去用，但是像是那種要額外去計算寬度、高度的排版方式，盡可能用比較簡單方法去替換，那麼，繼續往下看吧～

雖然置中的方法有很多種，但我都偏好使用特定幾種，像是Flexbox、Absolute + translate等等，主要還是用起來順手最重要。

二、 置中對齊 - Part 1

2.1 line-height（單行文字對齊）

簡單的單行文字對齊方法，只要把line-height高度設定成和要對齊的元素相同，即可垂直置中對齊，可搭配text-align: center;製作成垂直水平置中排版。

HTML：

<div class="card">
	<div class="content1">
		line-height
	</div>
</div>

CSS：

.content1 {
	background: #333;
	color: wheat;
	line-height: 400px;
	text-align: center;
}

顯示結果：

card代表每個置中排版的方法，用來做 RDW 用的，content後面加上數字，代表第幾個範例，而content裡面的內容則是文字，可以是單行或多行，多行文字使用wrap包起來。

2.2 Line-height + inline-block

文字有單行，也有多行，寫法上修改如下。

HTML：

<div class="card">
	<div class="content2">
		<div class="wrap">
			<p>line-height</p>
			<p>+</p>
			<p>inline-block</p>
		</div>
	</div>
</div>

CSS：

.content2 {
	text-align: center;
	line-height: 400px;
}

.wrap {
	color: wheat;
	background: #333;
	height: auto;
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

顯示結果：

2.3 僞元素 :before + inline-block

還不是很理解的用法，寫起來會卡卡的，程式碼如下。

HTML：

<div class="card card3">
	<div class="content3">
		<div class="wrap">
			<p> 僞元素 :before</p>
			<p>+</p>
			<p>inline-block</p>
		</div>
	</div>
</div>

CSS：

.content3 {
	width: 80%;
	display: inline-block;
	vertical-align: middle;
}

.card3::before {
	content: "";
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}

顯示結果：

三、 置中對齊 - Part 2

好用的置中寫法。

3.1 flexbox

單一元素的水平垂直置中時可使用。

HTML：

<div class="card">
	<div class="content4">
		<div class="wrap">
			<p>一言不合就直接使用</p>
			<p>flexbox</p>
		</div>
	</div>
</div>

CSS：

.content4 {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

顯示結果：

flexbox 寫在「父層」，可讓「子層」元素作排列。先將 display 設定為 flex 後，flex 相關用法即可生效，例如，flex-direction: column;可以選擇元素的排列方向（這裡的元素指的是元件），justify-content: center;指的是水平置中對齊，而align-items: center;指的是垂直置中對齊。

四、推薦資源

1. [CSS] 元素置中的 N 個方法
2. CSS 5種垂直置中方法

五、結論

置中對齊分成兩個章節來介紹，第 2 章節放的是我不常用寫法，第 3 章節則是放推薦的寫法（常用的寫法），有些寫法還不是特別清楚該如何使用，由於我的 HTML 架構與範例的架構不太一樣，因此，要將功能「移植」到我的專案上，還需要一點時間吸收消化一下，有時間再慢慢的補上。

六、參考資料

1. CSS垂直置中技巧，我只會23個，你會幾個